<template>
    <div class="float_list">
        <div v-for="(item, i) in props.btn_data" :key="item.id">
            <div @click="click(i)" :class="activeIndex === i && isClick ? 'btn active' : 'btn'">
                <div class="text">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, PropType } from 'vue'

const isClick = ref(false)

interface btn {
    name: string
    id: number
}

const props = defineProps({
    btn_data: {
        type: Array as PropType<Array<btn>>,
        required: true
    }
})

let activeIndex = ref(0)

const emit = defineEmits(['change'])
const lastClick = ref(-1)

const click = (i: any) => {
    if (lastClick.value === i) {
        isClick.value = !isClick.value
    } else {
        isClick.value = true
    }
    lastClick.value = i

    activeIndex.value = i
    emit('change', { index: i, active: isClick.value })
}
</script>

<style lang="scss" scoped>
.float_list {
    display: flex;
    justify-content: space-around;
    position: fixed;
    flex-direction: column;
    @include Width(600);
    @include Top(65);
    @include Left(450);
    z-index: 101;

    .btn {
        @include Width(130);
        @include hHeight(40);
        margin-bottom: 10px;
        background: url('./normal.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        .text {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            @include FontSize(14);
            color: #fff;
        }
    }
    & .active {
        background-size: 100% 100% !important;
        background: url('./active.png') no-repeat;

        .text {
            color: #ebc381;
        }
    }
}
</style>
